<template>
	<view class="container">
		<image src="../../static/images/ad.jpg" mode="widthFix" class="background-image" />
		<view class="btn" @click="go">
			<text>{{num}}</text>
			<text>跳过</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'

	let timer = null;
	const num = ref(3)

	onLoad(() => {
		jump()
	})

    // 定时器跳转
	const jump = () => {
		timer = setInterval(() => {
			num.value--
			if (num.value <= 0) {
				// clearTimer()
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}, 1000)
	}
	
	// 清除定时器
	const clearTimer = () => {
	    clearInterval(timer)
	  }
	  
	// 手动跳转
	const go = () => {
		// clearTimer()
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	
	onUnload(() => {
		clearTimer()
	})
</script>

<style>
	.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	/* 全屏背景图 */
	.background-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 确保图片填满容器 */
	}

	.btn {
		position: absolute;
		top: 90px;
		right: 20px;
		width: 100px;
		height: 40px;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.5);
		color: white;
		z-index: 10;
		/* 确保按钮在图片上方 */
	}
</style>